<template>
  <div>
    <div class="CPAPage">
      <!-- 轮播 -->
      <div class="banner">
        <div class="swiper_con">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide"
                :title="image.title"
                v-for="(image, index) in imageData"
                :key="index"
              >
                <div class="swiper-image">
                  <img :src="image.imgUrl" alt="" />
                </div>
              </div>
            </div>

            <!-- 分页器 -->
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div>
        </div>
      </div>

      <div class="heart_w">
        <!-- 最新咨询 -->
        <div class="block_3 flex_row">
          <div class="section_3 flex_row">
            <div class="image-text_1 flex-col justify-between">
              <img
                referrerpolicy="no-referrer"
                src="@/assets/images/cpa2/news01.png"
              />
              <span>最新资讯</span>
            </div>
          </div>
          <div class="section_4 flex_row">
            <a class="text-wrapper_1 flex-col" href="/cma/article/34971.html">
              <span>2024</span>
              <span>03-15</span>
            </a>
            <a href="/cma/article/34971.html">
              <div class="text-wrapper_2 flex-col">
                <span>拥有cma证书薪资待遇怎么样？</span>
                <span>
                  在财会领域，CMA证书被誉为管理会计领域的“黄金标准”，其独特的定位和广泛的认可度使得它成为许多人升职加薪的有力证书。那么，拥有CMA证书的薪资待遇如何呢？跟着融跃老师一起看看吧！
                </span>
              </div>
            </a>
          </div>
          <div class="section_4 flex_row">
            <a class="text-wrapper_1 flex-col" href="/cma/article/34950.html">
              <span>2024</span>
              <span>03-15</span>
            </a>
            <a href="/cma/article/34950.html">
              <div class="text-wrapper_2 flex-col">
                <span>考过CMA相当于什么水平？</span>
                <span>
                  CMA，即美国注册管理会计师，是由美国管理会计师协会（IMA）所颁发的专业认证，是全球范围内管理会计领域的权威认证之一。那么，考过CMA究竟代表着什么样的水平呢？
                </span>
              </div>
            </a>
          </div>
          <div class="section_4 flex_row">
            <a class="text-wrapper_1 flex-col" href="/cma/article/34840.html">
              <span>2024</span>
              <span>03-15</span>
            </a>
            <a href="/cma/article/34840.html">
              <div class="text-wrapper_2 flex-col">
                <span>2024年CMA考试大纲有哪些变化？</span>
                <span>
                  同其他领先的专业认证项目一样，注册管理会计师协会（ICMA®）会定期对CMA®考试的内容进行审核，以确保当前的考试内容得到及时更新并与商业实践相关。
                </span>
              </div>
            </a>
          </div>
        </div>

        <!-- 考情速递 -->
        <div class="understanding">
          <h2>CPA考情速览·了解考试</h2>
          <div class="tabbox">
            <div class="tabhead">
              <div
                class="headitem"
                :class="{ active: stand_active == 0 }"
                @click="stand_active = 0"
              >
                <p class="title">
                  <i></i>
                  <span class="font"> 竞争激烈</span>
                </p>
                <p class="desbox">从2017年到2023年,报考人数均超百万</p>
              </div>
              <div
                class="headitem"
                :class="{ active: stand_active == 1 }"
                @click="stand_active = 1"
              >
                <p class="title">
                  <i></i>
                  <span class="font"> 知识繁多：</span>
                </p>
                <p class="desbox">2024官方教材专业阶段六科一共3676页</p>
              </div>
              <div
                class="headitem"
                :class="{ active: stand_active == 2 }"
                @click="stand_active = 2"
              >
                <p class="title">
                  <i></i>
                  <span class="font"> 证书缺口：</span>
                </p>
                <p class="desbox">CPA未来仍存在6万CPA人才缺口</p>
              </div>
            </div>
            <div class="tabbody">
              <div class="bodyitem oneitem" v-show="stand_active == 0">
                <div class="titlediv">
                  <p>2013年—2023年 <small>CPA报名趋势图（单位：万）</small></p>
                  <a class="contact_kefu" rel="nofollow">查看报名条件</a>
                </div>
                <div class="contentdiv">
                  <img src="@/assets/images/cpa2/understanding01.png" alt="" />
                </div>
              </div>
              <div class="bodyitem twoitem" v-show="stand_active == 1">
                <div class="titlediv">
                  <div class="test">
                    <h6>考试科目</h6>
                    <p>
                      会计、审计、经济法、税法、财务成本管理、公司战略与风险管理
                    </p>
                  </div>
                  <a
                    class=""
                    href="/cpa/article/34404.html"
                    rel="nofollow"
                    target="_blank"
                    >了解各科情况</a
                  >
                </div>
                <div class="contentdiv">
                  <table>
                    <thead>
                      <tr>
                        <td colspan="3">注会考试科目情况</td>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>科目</td>
                        <td>特点</td>
                        <td>难易程度</td>
                      </tr>
                      <tr>
                        <td>会计</td>
                        <td>注重对知识的综合考查，考点之间有交叉</td>
                        <td>
                          <span class="star"></span>
                          <span class="star"></span>
                          <span class="star"></span>
                          <span class="star"></span>
                          <span class="star"></span>
                        </td>
                      </tr>
                      <tr>
                        <td>审计</td>
                        <td>对记忆要求高，部分考题涉及会计相关知识</td>
                        <td>
                          <span class="star"></span>
                          <span class="star"></span>
                          <span class="star"></span>
                          <span class="star"></span>
                          <span class="star"></span>
                        </td>
                      </tr>
                      <tr>
                        <td>财管</td>
                        <td>知识点集中，包括：财务管理、成本会计、管理会计</td>
                        <td>
                          <span class="star"></span>
                          <span class="star"></span>
                          <span class="star"></span>
                          <span class="star"></span>
                          <span class="star"></span>
                        </td>
                      </tr>
                      <tr>
                        <td>经济法</td>
                        <td>记忆量大；知识点分散，无逻辑主线</td>
                        <td>
                          <span class="star"></span>
                          <span class="star"></span>
                          <span class="star"></span>
                          <span class="star"></span>
                        </td>
                      </tr>
                      <tr>
                        <td>税法</td>
                        <td>难度较高，需精确记忆，大量计算</td>
                        <td>
                          <span class="star"></span>
                          <span class="star"></span>
                          <span class="star"></span>
                          <span class="star"></span>
                        </td>
                      </tr>
                      <tr>
                        <td>战略</td>
                        <td>知识点集中，逻辑主线清晰</td>
                        <td>
                          <span class="star"></span>
                          <span class="star"></span>
                          <span class="star"></span>
                        </td>
                      </tr>
                      <tr>
                        <td colspan="3">
                          说明：考试难度因人而异，本表“难易程度”根据大多数考生反馈为依准，仅供参考
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="bodyitem threeitem" v-show="stand_active == 2">
                <div class="titlediv">
                  <div class="test">
                    <h6>来源：</h6>
                    <p>财政部公布的《会计改革与发展“十四五”规划纲要》</p>
                  </div>
                  <a class="contact_kefu" rel="nofollow">咨询证书价值</a>
                </div>
                <div class="contentdiv">
                  <table>
                    <thead>
                      <tr>
                        <td colspan="3">“十四五”时期会计改革与发展指标</td>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>指标</td>
                        <td>2025年</td>
                        <td>属性</td>
                      </tr>
                      <tr>
                        <td colspan="3">注册会计师行业规模</td>
                      </tr>
                      <tr>
                        <td>注册会计师人数（含执业和非执业）</td>
                        <td>40万人</td>
                        <td>预期性</td>
                      </tr>
                      <tr>
                        <td>大型会计务所数量</td>
                        <td>10家</td>
                        <td>预期性</td>
                      </tr>
                      <tr>
                        <td>注册会计师行业年收入规模</td>
                        <td>1900亿元</td>
                        <td>预期性</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 考试日历 -->
      <div class="calendar">
        <div class="heart_w">
          <h2>CPA考试日历</h2>
          <div class="calendarimg">
            <img src="@/assets/images/cpa2/calendar01.png" alt="" />
          </div>
          <div class="linkbox">
            <a href="/cpa/article/33951.html" target="_blank">查看考试大纲</a>
            <a class="contact_kefu" rel="nofollow">领取学习计划</a>
            <a class="contact_kefu" rel="nofollow">考前冲刺技巧</a>
            <a class="contact_kefu" rel="nofollow">考前预约提醒</a>
            <a class="contact_kefu" rel="nofollow">立即查询成绩</a>
          </div>

          <div class="countdown">
            <div class="countitem">
              <div class="ditance_test">
                <p><span style="color: #e04946">专业阶段</span>考试仅剩</p>
                <div class="reciprocal" data-times="2024/8/23"></div>
              </div>
              <p>专业阶段考试：2024年8月23-25日</p>
            </div>
            <div class="countitem">
              <div class="ditance_test">
                <p>综合阶段考试仅剩</p>
                <div class="reciprocal" data-times="2024/8/24"></div>
              </div>
              <p>综合阶段考试：2024年8月24日</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 领取资料 -->
      <div class="package">
        <div class="heart_w wapper_t">
          <div class="package_left">2024年CPA新版备考资料包</div>
          <div class="package_middle">
            <div><img src="@/assets/images/cpa2/package01.png" />历年真题</div>
            <div><img src="@/assets/images/cpa2/package02.png" />学习计划</div>
            <div><img src="@/assets/images/cpa2/package03.png" />思维导图</div>
            <div><img src="@/assets/images/cpa2/package04.png" />高频考点</div>
          </div>
          <a
            rel="nofollow"
            class="contact_kefu package_right"
            href="/combo/index/material"
          >
            一键<br />领取
          </a>
        </div>
      </div>

      <!-- 课程 -->
      <div class="courselist">
        <div class="wapper">
          <div class="tit_box">
            <h1 class="wow animate__animated animate__bounceInUp animated">
              想要快速斩获CPA
            </h1>
            <span class="wow animate__animated animate__bounceInUp animated">
            </span>
            <p
              data-wow-delay="0.2s"
              class="wow animate__animated animate__bounceInUp animated"
            >
              融跃CPA培训课程 满足不同考生需求
            </p>
          </div>

          <div class="listbox">
            <div class="itembox">
              <img
                src="https://video.rycfa.com/image/default/3D2BBCDA11BD4FBFA438F06500AAF644-6-2.png"
                alt=""
              />
              <h4>CPA1V1私教尊享班</h4>
              <p class="text">
                本计划专为大学生定制，名师精讲为主，陪伴式督学，24H答疑，让备考更轻...
              </p>
              <a href="/combo/order/combo_detail/coid/2032">了解详情 -></a>
            </div>
          </div>

          <a href="/combo/order/combo/cid/4" class="tomore">更多CPA课程</a>
        </div>
      </div>

      <!-- 免费试学 -->
      <div class="trylisten">
        <div class="wapper">
          <h3>免费申领CPA试学</h3>
          <div class="submitdata">
            <input type="text" placeholder="姓名" class="nameinput" value="" />
            <input
              type="tel"
              placeholder="手机号"
              class="phoneinput"
              value=""
            />
            <input
              type="text"
              placeholder="验证码"
              class="codeinput"
              value=""
            />
            <span class="getcode">获取验证码</span>
            <span class="submit">立即领取</span>
          </div>
        </div>
      </div>

      <!-- 直播 -->
      <div class="live_box heart_w">
        <h1 class="wow animate__animated animate__fadeInUp">
          精彩直播学堂 助攻快速加分
        </h1>
        <!-- 轮播展示 -->
        <div class="live_swiper">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide wow animate__animated animate__fadeInRight"
                data-wow-delay="0.0s"
              >
                <div class="time">
                  <h5>2023-12-02</h5>
                  <p>19:00 - 20:00</p>
                </div>
                <div class="live_info">
                  <img
                    src="http://img.rongyuejiaoyu.com//uploads/20231206/a0c5f1ca34aa255283aa592ae012a2ac.jpg"
                    alt=""
                  />
                  <p class="live_name">2024年FRM最新考纲解读&备考攻略</p>
                  <div class="yy_num">
                    <p class="isopen"><i></i><span>免费</span></p>
                  </div>
                  <a
                    href="https://www.rongyuejiaoyu.com/combo/live/live_lesson/id/960"
                    class="yy_now wow animate__animated animate__fadeInRight"
                    data-wow-delay="0.6s"
                    target="_blank"
                  >
                    观看回放
                  </a>
                </div>
              </div>
              <div
                class="swiper-slide wow animate__animated animate__fadeInRight"
                data-wow-delay="0.1s"
              >
                <div class="time">
                  <h5>2022-12-29</h5>
                  <p>19:00 - 21:00</p>
                </div>
                <div class="live_info">
                  <img
                    src="https://img.rongyuejiaoyu.com//uploads/20221227/fa00dd18d6a3e0c06f66c7c6914aad91.jpg"
                    alt=""
                  />
                  <p class="live_name">一堂玩转股、债、基的课</p>
                  <div class="yy_num">
                    <p class="isopen"><i></i><span>免费</span></p>
                  </div>
                  <a
                    href="https://www.rongyuejiaoyu.com/combo/live/live_lesson/id/810"
                    class="yy_now wow animate__animated animate__fadeInRight"
                    data-wow-delay="0.6s"
                    target="_blank"
                  >
                    观看回放
                  </a>
                </div>
              </div>
            </div>

            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
          </div>
          <!-- <a
            class="all_live wow animate__animated animate__fadeInRight"
            data-wow-delay="1s"
            href="https://www.rongyuejiaoyu.com/combo/index/zhibo"
            target="_blank"
          >
            查看全部直播
          </a> -->
        </div>
      </div>

      <!-- 广告条 -->
      <div class="tobook">
        <div>
          <span>CPA</span>
          <p>
            <span class="textspan">教辅书籍专场</span>
            <a href="https://www.rongyuejiaoyu.com/combo/order/book">>></a>
          </p>
        </div>
      </div>

      <!-- 师资团队 -->
      <div class="teacherteam">
        <div class="wapper">
          <h2>业内大咖讲师，助学“C位”出道</h2>
          <div class="flash4" style="margin-top: 50px">
            <ul>
              <li>
                <div class="imgTop">
                  <img
                    src="https://img.rongyuejiaoyu.com//uploads/20221208/39ca89d64a341163ebc0de26dae719c1.png"
                    alt=""
                    class="tm"
                  />
                  <!-- <div class="teacher_intro">123</div> -->
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 五大保障 -->
      <div class="guarantee">
        <div class="wapper">
          <h2>5大服务保障 助力通关无忧</h2>
          <div class="contentbox">
            <div class="contentitem">
              <img src="@/assets/images/cpa2/guarantee01.png" alt="" />
              <h4>教学体系完善</h4>
              <p>多年教学经验，<br />与国际化前沿性<br />和实操性相结合</p>
              <a class="contact_kefu" rel="nofollow">详情咨询 </a>
            </div>
            <div class="contentitem">
              <img src="@/assets/images/cpa2/guarantee02.png" alt="" />
              <h4>课程设置灵活</h4>
              <p>多种注会培训课程班型，满足不同学员需求，高效备考</p>
              <a class="contact_kefu" rel="nofollow">详情咨询 </a>
            </div>
            <div class="contentitem">
              <img src="@/assets/images/cpa2/guarantee03.png" alt="" />
              <h4>名师专业化</h4>
              <p>知名会计教授和老师授课，全程指导答疑，更贴近考试</p>
              <a class="contact_kefu" rel="nofollow">详情咨询 </a>
            </div>
            <div class="contentitem">
              <img src="@/assets/images/cpa2/guarantee04.png" alt="" />
              <h4>资料高精准</h4>
              <p>拒绝题海，侧重重点、难点知识点，精简真题、讲座、音频等资料</p>
              <a class="contact_kefu" rel="nofollow">详情咨询 </a>
            </div>
            <div class="contentitem">
              <img src="@/assets/images/cpa2/guarantee05.png" alt="" />
              <h4>督导一站式</h4>
              <p>全面实现教辅责任制专业硕博辅导，全程陪伴直达通关</p>
              <a class="contact_kefu" rel="nofollow">详情咨询 </a>
            </div>
          </div>
        </div>
      </div>

      <!-- 新闻资讯 -->
      <div class="Consulting">
        <div class="wapper">
          <h2 class="title">前沿财经资讯 备考动态早知道</h2>
          <p class="tabhead" data-wow-delay="0.3s">
            <span class="active">热点问题</span>
            <span>考试动态</span>
            <span>经验分享</span>
            <span>热点资讯</span>
            <span>职业发展</span>
          </p>

          <div class="tabbody">
            <ul>
              <li>
                <div class="imgbox">
                  <img
                    src="https://img.rongyuejiaoyu.com/uploads/20210112/bc56e35f10f9137ed39865852fbe4a24.jpg"
                    alt=""
                  />
                  <div class="tag">热点问题</div>
                  <a
                    href="http://www.rongyuejiaoyu.com/cfa/list/67"
                    target="_blank"
                  >
                    查看更多
                  </a>
                </div>
                <div class="newbox">
                  <div class="firstnew">
                    <h3>cpa综合阶段考试难度大吗？</h3>
                    <p>
                      众所周知，注会证书含金量高，持证人就业前景广阔，但是通过注会考试并不是一件容易的事。那么，2024年注会教材有哪些变化？学习重点是什么呢？融跃老师帮大家分析分析。
                      <a href="/cpa/article/35068.html">查看详情</a>
                    </p>
                  </div>
                  <a
                    class="othernews"
                    data-wow-delay="0.1s"
                    title="cpa一共考几门几年考完？"
                    href="/cpa/article/35067.html"
                  >
                    <i></i>
                    <span class="namespan">cpa一共考几门几年考完？</span>
                    <span class="datespan">2024-03-15</span>
                  </a>
                  <a
                    class="othernews"
                    data-wow-delay="0.2s"
                    title="注册会计师考试有英语题吗？"
                    href="/cpa/article/35066.html"
                  >
                    <i></i>
                    <span class="namespan">注册会计师考试有英语题吗？</span>
                    <span class="datespan">2024-03-15</span>
                  </a>
                </div>
              </li>
            </ul>
            <div class="formdiv">
              <h4>免费领取资料包</h4>
              <p class="classification">
                <span>零基础入门</span><span>历年真题</span>
                <span>智能题库</span><span>思维导图</span>
                <span>CPA百宝书</span>
                <span>课程视频</span>
              </p>
              <div class="formdata">
                <input
                  type="text"
                  placeholder="姓名"
                  class="nameinput"
                  value=""
                />
                <input
                  type="tel"
                  placeholder="手机号"
                  class="phoneinput"
                  value=""
                />
                <input
                  type="text"
                  placeholder="验证码"
                  class="codeinput"
                  value=""
                />
                <span class="getcode">获取验证码</span>
                <input
                  type="email"
                  placeholder="邮箱"
                  class="eamilinput"
                  value=""
                />
                <p class="btnbox">
                  <span class="active submit">提交</span>
                  <span class="cancel">重置</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 考试要求 -->
      <div class="requirement">
        <div class="wapper">
          <div class="itembox">
            <img src="@/assets/images/cpa2/requirement01.png" alt="" />
            <h2>学历要求</h2>
            <p>学历需经国家教育部门承认，大专及以上学历。</p>
            <a href="/cpa/article/33870.html" target="_blank">
              查看2024学历相关要求
            </a>
          </div>
          <div class="itembox">
            <img src="@/assets/images/cpa2/requirement02.png" alt="" />
            <h2>职称要求</h2>
            <p>如学历不符，需具有会计或相关专业中级以上技术职称。</p>
            <a class="contact_kefu" rel="nofollow">查看2024相关职称要求</a>
          </div>
          <div class="itembox">
            <img src="@/assets/images/cpa2/requirement03.png" alt="" />
            <h2>考试前提</h2>
            <p>申请综合阶段考试，需先取得注册会计师专业阶段考试合格证。</p>
            <a class="contact_kefu" rel="nofollow">查看2024考试相关要求</a>
          </div>
        </div>
      </div>

      <!-- 底部表单 -->
      <div class="ending">
        <div class="wapper">
          <div class="titlebox">
            <h3>CPA专属学习资料·备考锦囊</h3>
            <span></span>
            <h4>CPA专属学习资料·备考锦囊</h4>
          </div>
          <div class="ending_bot">
            <div class="ending_bot_left">
              <div class="ending_bot_leftTop">融跃资料库</div>
              <div class="ending_ul">
                <div class="namebox">注会考试大纲</div>
                <a
                  href="/cpa/article/33951.html"
                  target="_blank"
                  class="tomore"
                >
                  点击查看>>
                </a>
              </div>
              <div class="ending_ul">
                <div class="namebox">历年真题解析</div>
                <a href="/combo/index/material" target="_blank" class="tomore"
                  >点击查看>></a
                >
              </div>
              <div class="ending_ul">
                <div class="namebox">模拟试卷汇总</div>
                <a
                  href="http://www.rongyuejiaoyu.com/index/user/new_page"
                  target="_blank"
                  class="tomore"
                  >点击查看>></a
                >
              </div>
              <div class="ending_ul">
                <div class="namebox">高频考点整理</div>
                <a href="/combo/index/material" target="_blank" class="tomore"
                  >点击查看>></a
                >
              </div>
              <div class="ending_ul">
                <div class="namebox">精选典型习题</div>
                <a href="/combo/index/material" target="_blank" class="tomore"
                  >点击查看>></a
                >
              </div>
              <div class="ending_ul">
                <div class="namebox">财会每日一练</div>
                <a
                  href="http://www.rongyuejiaoyu.com/index/user/new_page"
                  target="_blank"
                  class="tomore"
                  >点击查看>></a
                >
              </div>
            </div>
            <div class="ending_bot_right">
              <div class="ending_bot_leftTop">融跃问答库</div>
              <div class="ending_ul">
                <div class="namebox">什么是“高等专科以上学历”？</div>
                <a class="tomore contact_kefu" rel="nofollow">点击咨询</a>
              </div>
              <div class="ending_ul">
                <div class="namebox">会计或相关专业中级以上技术职称是？</div>
                <a class="tomore contact_kefu" rel="nofollow">点击咨询</a>
              </div>
              <div class="ending_ul">
                <div class="namebox">注会报名时还未下发毕业证，能否报名？</div>
                <a class="tomore contact_kefu" rel="nofollow">点击咨询</a>
              </div>
              <div class="ending_ul">
                <div class="namebox">未通过学历认证（资格审核）怎么办？</div>
                <a class="tomore contact_kefu" rel="nofollow">点击咨询</a>
              </div>
              <div class="ending_ul">
                <div class="namebox">成人自考/函授能参加注会报名吗？</div>
                <a class="tomore contact_kefu" rel="nofollow">点击咨询</a>
              </div>
              <div class="ending_ul">
                <div class="namebox">注册会计师考几科？成绩几年内有效？</div>
                <a class="tomore contact_kefu" rel="nofollow">点击咨询</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CPAPage',
  data() {
    return {
      imageData: [
        {
          title: '123123img',
          imgUrl: require('@/assets/images/img_s.jpg')
        },
        {
          title: '123image',
          imgUrl: require('@/assets/images/CPA.jpg')
        },
        {
          title: '123image',
          imgUrl: require('@/assets/images/cfaSwipet.jpg')
        }
      ],
      stand_active: 0
    }
  },
  created() {},
  mounted() {
    this.init_t()
    this.changeSize()
    this.initSwiper3()
  },
  methods: {
    changeSize() {
      // 计算html字体大小
      let designSize = 1920 // 设计图尺寸
      let html = document.documentElement
      // 浏览器宽度
      let rem = (window.screen.width * 10) / designSize
      document.documentElement.style.fontSize = rem + 'px'
    },
    init_t() {
      const mySwiper_t = new this.$swiper('.banner .swiper-container', {
        direction: 'horizontal', // 水平切换选项
        loop: true, // 循环模式选项
        autoplay: true, //自动切换
        effect: 'slide', // 切换效果
        pagination: {
          el: '.banner .swiper-pagination',
          clickable: true
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      })
      // 鼠标移入停止自动播放
      mySwiper_t.el.onmouseover = function () {
        mySwiper_t.autoplay.stop()
      }
      mySwiper_t.el.onmouseout = function () {
        mySwiper_t.autoplay.start()
      }
    },
    initSwiper3() {
      let swiper3 = new this.$swiper('.live_box .swiper-container', {
        slidesPerView: 4,
        navigation: {
          nextEl: '.live_box .swiper-button-next',
          prevEl: '.live_box .swiper-button-prev'
        },
        observer: true,
        observeParents: true
      })
    }
  }
}
</script>

<style lang="scss">
body,
html,
#app {
  background-color: #fff;
}
</style>
<style scoped lang="scss">
@import '@/assets/styles/CPAPage.scss';
</style>
